import { StrictMode, lazy, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { Spin } from 'antd'
import './index.css'
import App from './App.jsx'
import AuthLayout from './layouts/AuthLayout.jsx'
import { initNotification } from './utils/notification.jsx'
import wsManager from './utils/websocket'

// 使用懒加载方式引入组件，添加预加载提示
const Login = lazy(() => import('./pages/Login.jsx'))
const Dashboard = lazy(() => import('./pages/Dashboard.jsx'))
const Questionnaire = lazy(() => import('./pages/Questionnaire.jsx'))
const TestPage = lazy(() => import('./pages/TestPage.jsx'))
const NotificationTest = lazy(() => import('./pages/NotificationTest.jsx'))
const UserManagementTest = lazy(() => import('./pages/UserManagementTest.jsx'))

// 优化的加载组件
const LoadingSpinner = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '200px',
    flexDirection: 'column',
    gap: '16px'
  }}>
    <Spin size="large" />
    <div style={{ fontSize: '16px', color: '#666' }}>
      加载中...
    </div>
  </div>
)

// 创建路由配置
const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      // 登录页面（不需要认证）
      { 
        path: 'login', 
        element: (
          <Suspense fallback={<LoadingSpinner />}>
            <Login />
          </Suspense>
        )
      },
      // 测试页面
      {
        path: 'test',
        element: (
          <AuthLayout>
            <Suspense fallback={<LoadingSpinner />}>
              <TestPage />
            </Suspense>
          </AuthLayout>
        )
      },
      // 通知测试页面
      {
        path: 'notification-test',
        element: (
          <AuthLayout>
            <Suspense fallback={<LoadingSpinner />}>
              <NotificationTest />
            </Suspense>
          </AuthLayout>
        )
      },
      // 用户管理测试页面
      {
        path: 'user-management-test',
        element: (
          <AuthLayout>
            <Suspense fallback={<LoadingSpinner />}>
              <UserManagementTest />
            </Suspense>
          </AuthLayout>
        )
      },
      // 问卷页面（不需要登录）
      {
        path: 'questionnaire',
        element: (
          <Suspense fallback={<LoadingSpinner />}>
            <Questionnaire />
          </Suspense>
        )
      },
      // 路由配置（需要登录）
      {
        element: <AuthLayout />,
        children: [
          { 
            path: 'dashboard', 
            element: (
              <Suspense fallback={<LoadingSpinner />}>
                <Dashboard />
              </Suspense>
            )
          }
        ]
      },
      // 根路径重定向到仪表板
      {
        path: '/',
        element: (
          <AuthLayout>
            <Suspense fallback={<LoadingSpinner />}>
              <Dashboard />
            </Suspense>
          </AuthLayout>
        )
      }
    ]
  }
])

// 初始化全局配置
initNotification();

// 启动WebSocket连接
setTimeout(() => {
  try {
    wsManager.connect();
  } catch (error) {
    console.warn('WebSocket连接失败，应用将继续运行:', error);
  }
}, 2000); // 延迟2秒启动

// 渲染应用
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
)